<template>
  <el-container style="min-height: 100vh">
    <!-- left -->
    <el-aside :width="sideWidth + 'px'" style="box-shadow: 2px 0 6px rgb(0 21 41 / 35%);">
      <el-menu style="min-height: 100%; overflow-x: hidden" background-color="rgb(48, 65, 86)" text-color="#fff"
        active-text-color="#ffd04b" :collapse-transition="false" :collapse="isCollapse" :default-active="getActivePath()"
        :router="true">
        <div style="height: 60px; line-height: 60px; text-align: center">
          <img src="../assets/image/logo1.png" alt="" style="width: 30px; position: relative; top: 5px; right: 0px">
          <b style="color: white; margin-left: 10px;" v-show="logoTextShow">超市后台管理系统</b>
        </div>
        <!-- 导航菜单 -->
        <el-menu-item index="index">
          <i class="el-icon-s-home"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu v-for="menu in meuns" :index="menu.route + ''" :collapse="false">
          <!-- 一级导航 -->
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{ menu.name }}</span>
          </template>
          <!-- 二级导航 -->

          <el-menu-item v-for="menu1 in menu.children" :index="menu1.route + ''">
            <i :class="menu1.icon"></i>
            <span slot="title">{{ menu1.name }}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <!-- 个人信息 -->
      <el-header style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px; display: flex">
        <div style="flex: 1; font-size: 20px">
          <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
        </div>
        <el-dropdown style="width: 200px;  text-align: right; cursor: pointer; margin-right: 50px; ">
          <span>{{ currentUser.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="font-size: 14px; padding: 5px 5px">个人信息</el-dropdown-item>
            <el-dropdown-item style="font-size: 14px; padding: 5px 5px">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 面包屑 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height:2; margin-left: 20px;">
        <el-breadcrumb-item v-for="(item, index) in keppAliveRoutes" :key="index" :to="{ path: item.path }">
          {{ item.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 子页面-->
      <el-container>
        <el-main>
          <!-- 当前页面的子路由会在router-view展示-->
          <router-view />
        </el-main>
      </el-container>
      <!-- 底部 -->
      <footer style="line-height: 40px;text-indent: 20px;font-size: 14px;text-align: center;background-color: #e6e6e6;">
        &copy;2022-2030 Pleasant Store @波比小队
      </footer>
    </el-container>
  </el-container>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      collapseBtnClass: 'el-icon-s-fold',
      sideWidth: 200,
      logoTextShow: true,
      isCollapse: false, //是否折叠菜单
      breadcrumbItems: [], // 存储面包屑项的数组
      keppAliveRoutes: [],
      currentUser: { name: '小刚子' },
      meuns: [
        {
          id: 1, name: '系统管理', route: '/info', icon: 'el-icon-setting',
          children: [
            { childId: 1, name: '个人信息管理', route: '/info', icon: 'el-icon-user-solid' },
          ]
        },
        {
          id: 2, name: '促销管理', icon: 'el-icon-setting',
          children: [
            { childId: 1, name: '促销活动管理', route: '/promotion', icon: 'el-icon-user-solid' },
          ]
        },
        {
          id: 3, name: '商品管理', route: '/good', icon: 'el-icon-s-goods',
          children: [
            { childId: 1, name: '商品分类管理', route: '/goodClass', icon: 'el-icon-s-goods' },
            { childId: 2, name: '商品入库管理', route: '/GoodsStock', icon: 'el-icon-s-goods' },
            { childIdd: 3, name: '商品销售管理', route: '/good', icon: 'el-icon-s-goods' },
            { childId: 4, name: '商品流水管理', route: '/storeflow', icon: 'el-icon-s-goods' },
            { childId: 5, name: '商品统计管理', route: '/goodStatistics', icon: 'el-icon-s-marketing' },
          ]
        },
        {
          id: 4, name: '员工管理', route: '/employee', icon: 'el-icon-s-custom',
          children: [
            { childId: 1, name: '员工信息管理', route: '/employee', icon: 'el-icon-user-solid' },
          ]
        },
        {
          id: 5, name: '会员管理', route: '/user', icon: 'el-icon-user-solid',
          children: [
            { childId: 1, name: '会员信息管理', route: '/user', icon: 'el-icon-user-solid' },
          ]
        }
      ],
    }
  },
  mounted() {
    // this.generateBreadcrumbItems();
    this.$router.afterEach((to, from) => {
      console.log(to);
      console.log(from);
      if (to.name === 'Home') {
        return;
      }
      //keppAliveRoutes查找是否包含我当前要跳转的路由
      this.keppAliveRoutes.forEach(r => r.active = false);//这里菜单只能存在一个被选中
      let existRoutes = this.keppAliveRoutes.filter(r => r.path === to.path);
      if (existRoutes.length === 0) {
        this.keppAliveRoutes.push({
          title: to.meta.title,
          path: to.path,
          active: true
        })
      } else {
        existRoutes[0].active = true;
      }
    });
  },
  methods: {
    collapse() {  // 点击收缩按钮触发
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {  // 收缩
        this.sideWidth = 64
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false
      } else {   // 展开
        this.sideWidth = 200
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true
      }
    },
    getActivePath() {
      let routes = this.keppAliveRoutes.filter(r => r.active == true);
      if (routes.length === 0) {
        return "-1";
      } else {
        return routes[0].path;
      }
    },
  }
}
</script>

<style>
.headerBg {
  background: #eee !important;
}

.search-container {
  margin: 3px 0px;
}
</style>